<template>
    <div class="pop-commodity-label">
        <el-drawer
            title="运费设置"
            :visible.sync="is_drawer"
            class="drawer-box"
        >
            <div class="context-box" v-show="!is_add">
                <div class="add-but">
                    <el-button type="primary" @click="addFun"
                        >增加运费模板</el-button
                    >
                </div>

                <div class="list-box comm-list">
                    <div
                        class="list-row"
                        v-for="(item, index) in data_list"
                        :key="item.id"
                    >
                        <div class="title">
                            <el-radio v-model="form.id" :label="item.id">{{
                                item.title
                            }}</el-radio>
                        </div>
                        <div class="but-box">
                            <el-button
                                type="primary"
                                size="mini"
                                @click="editFun(item)"
                                >编辑</el-button
                            >
                            <el-button
                                type="danger"
                                size="mini"
                                @click="delFun(item, index)"
                                >删除</el-button
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div class="context-box" v-show="is_add">
                <el-form ref="freForm" :model="freForm" label-width="80px">
                    <el-form-item label="统一运费">
                        <el-input
                            v-model="freForm.fee"
                            placeholder="请输入统一运费"
                            class="input-w"
                        >
                        </el-input>
                        <span>元</span>
                    </el-form-item>
                    <el-form-item label-width="15px">
                        <el-checkbox v-model="is_checked1">订单满</el-checkbox>
                        <el-input
                            v-model="freForm.min_amount"
                            placeholder="请输入金额"
                            class="input-w"
                        >
                        </el-input>
                        <span>元免运费</span>
                    </el-form-item>
                    <el-form-item label-width="15px">
                        <el-checkbox v-model="is_checked2">订单满</el-checkbox>
                        <el-input
                            v-model="freForm.min_num"
                            placeholder="请输入数量"
                            class="input-w"
                        >
                        </el-input>
                        <span>件免运费</span>
                    </el-form-item>
                </el-form>
                <div class="but-submit">
                    <div class="but-box">
                        <el-button @click="is_add = false">取消</el-button>
                        <el-button type="primary" @click="submitFun"
                            >保存</el-button
                        >
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";

export default {
    props: ["idyun", "form", "data_list"],
    components: {},
    computed: {},
    data() {
        return {
            is_drawer: false,
            is_add: false,
            freForm: {},
            is_checked1: false,
            is_checked2: false,
        };
    },
    created() {},
    mounted() {},
    methods: {
        initData() {
            this.is_drawer = true;
            this.is_add = false;
        },

        // 新增
        addFun() {
            this.is_add = true;
            this.cancelFun();
        },

        // 编辑
        editFun(item) {
            this.is_add = true;

            this.cancelFun(item);
        },
        // 初始提交数据
        cancelFun(item = {}) {
            this.freForm = {
                fee: item.fee && item.fee != 0 ? item.fee : "",
                min_amount:
                    item.min_amount && item.min_amount != 0
                        ? item.min_amount
                        : "",
                min_num: item.min_num && item.min_num != 0 ? item.min_num : "",
                id: item.id != 0 ? item.id : "0",
                idyun: this.idyun,
            };
            this.is_checked1 = this.freForm.min_amount != 0 ? true : false;
            this.is_checked2 = this.freForm.min_num != 0 ? true : false;
        },
        // 保存
        async submitFun() {
            const param = JSON.parse(JSON.stringify(this.freForm));
            if (!this.is_checked1) {
                param.min_amount = "";
            }
            if (!this.is_checked2) {
                param.min_num = "";
            }
            let url = config.COMPSET_SFEEYUN_SAVE;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                this.$msg({ title: res.msg });
                this.is_add = false;
                this.getlistFun();
            }
        },
        getlistFun() {
            this.$emit("getlistFun");
        },
        // 删除
        async delFun(item, index) {
            if(item.id == this.form.id){
                this.$msg({title:'选中不能删除'})
                return
            }
            this.$confirm(`确定删除${item.title} ?`, "删除", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const param = {
                        id: item.id,
                    };
                    let url = config.COMPSET_SFEEYUN_DEL;
                    let res = await this.$api({ url: url, data: param });
                    if (!res) return;
                    if (res.status == 1) {
                        this.$msg({ title: res.msg });
                        this.data_list.splice(index, 1);
                    }
                })
                .catch(() => {});
        },
    },
};
</script>

<style lang="scss" scoped >
.context-box {
    height: 100%;
    padding: 0 20px;
    .add-but {
        text-align: right;
        padding-bottom: 20px;
        border-bottom: 1px solid #f2f2f2;
    }
    .list-box {
        height: calc(100vh - 155px);
        margin-top: 10px;
        .list-row {
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f2f2f2;
            &:first-child {
                padding-top: 0;
            }
            .title {
                font-size: 14px;
            }
            .doc {
                .num {
                    margin-right: 20px;
                }
            }
            .but-box {
                text-align: right;
            }
        }
    }
    .but-submit {
        position: absolute;
        right: 20px;
        bottom: 20px;
        width: 100%;
        .but-box {
            display: flex;
            justify-content: flex-end;
        }
    }
    ::v-deep.mb-box {
        .el-radio__label {
            display: none;
        }

        .color-box {
            display: flex;
            font-size: 14px;
            .color-row {
                margin-right: 10px;
                text-align: center;
                cursor: pointer;
                .color-title {
                    font-size: 12px;
                    margin: 10px 0;
                }
                .background-item {
                    width: 80px;
                    height: 80px;
                }
            }
        }
    }
    .input-w {
        width: 300px;
        margin: 0 10px;
    }
}
</style>
